<template>
  <div class="detail-box">
    <h3 class="title">{{imgInfo.title}}</h3>
    <div class="click-time">
      <span>点击次数: {{imgInfo.click}}</span>
      <span>创建时间: {{imgInfo.add_time | timeFilter}}</span>
    </div>
    <hr>

    <ul class="img-detail">
      <li @click="showImg(index)" v-for="(item, index) in imgDetail" :key="item.src">
        <img :src="item.src" alt="">
      </li>
    </ul>

    <div v-html="imgInfo.content"></div> 
  </div>
</template>
<script>
import { ImagePreview } from 'vant'

export default {
  data() {
    return {
      imgDetail: [],
      imgInfo: {}
    }
  },
  created() {
    this.getImgDetail()
    this.getImgInfo()
  },
  methods:{
    async getImgDetail() {
      const { data: res } = await this.$http.get(`api/getthumimages/${this.$route.params.id}`)
      if(res.status !== 0) return this.$toast('请求数据失败')

      this.imgDetail = res.message
    },
    async getImgInfo() {
      const { data: res } = await this.$http.get(`api/getimageInfo/${this.$route.params.id}`)
      if(res.status !== 0) return this.$toast('请求数据失败')

      this.imgInfo = res.message[0]
    },
    showImg(index) {
      let arr = []
      this.imgDetail.forEach(item => {
        arr.push(item.src)
      })
    
      ImagePreview({
        images: arr,
        startPosition: index,
        'lazy-load': true,
        onClose() {
        },
        'class-name': 'test-pang'
      })
    }
  }
}
</script>
<style lang="less">
.detail-box{
  padding: 0 5px;
  .title{
    font-size: 16px;
    text-align: center;
  }
  .click-time{
    display: flex;
    font-size: 12px;
    justify-content: space-between;
    color: #1989fa;
  }
  .img-detail{
    display: flex;
    flex-wrap: wrap;
    li{
      width: 33.333%;
      padding: 5px;
      box-sizing: border-box;
      img{
        width: 100%;
      }
    }
  }
}
.van-image__error, .van-image__img, .van-image__loading{
  width: 100%;
  height: 300px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
</style>